<template>
  <view class="tabbar">
    <view
      v-for="(item, index) in tabbarList"
      :key="item.title"
      class="tabbar-item"
      :class="{ 'active-tabbar-item': isActive(item) }"
      @click="switchPage(item)"
    >
      <view class="icon-box">
        <image
          :src="isActive(item) ? item.activeIcon : item.icon"
          mode="scaleToFill"
        />
      </view>
      <view class="title">{{ item.title }}</view>
    </view>
    
  </view>
</template>
<script setup lang="ts">
import Router from "@/router";
import { computed, ref } from "vue";

interface TabbarItem {
  title: string;
  icon: string;
  activeIcon: string;
  path: string;
}

const tabbarList = ref<TabbarItem[]>([
  {
    title: "首页",
    icon: "/static/images/tabbar/home.png",
    activeIcon: "/static/images/tabbar/home-active.png",
    path: "pages/tabbarModule/home/index",
  },
  {
    title: "校园圈",
    icon: "/static/images/tabbar/school-circle.png",
    activeIcon: "/static/images/tabbar/school-circle-active.png",
    path: "pages/tabbarModule/schoolCircle/index",
  },
  {
    title: "订单",
    icon: "/static/images/tabbar/order.png",
    activeIcon: "/static/images/tabbar/order-active.png",
    path: "pages/tabbarModule/order/index",
  },
  {
    title: "我的",
    icon: "/static/images/tabbar/my.png",
    activeIcon: "/static/images/tabbar/my-active.png",
    path: "pages/tabbarModule/my/index",
  },
]);

// 当前路由地址
const currentRoute = computed(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  return currentPage.route;
});

// 判断是否当前页面
const isActive = (item: TabbarItem) => {
  return item.path === currentRoute.value;
};

const switchPage = (item: TabbarItem) => {
  console.log("item.path", item.path);
  Router.switchTab("/" + item.path);
};
</script>
<style lang="scss" scoped>
.tabbar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  height: calc(100rpx + env(safe-area-inset-bottom));
  padding-bottom: calc(env(safe-area-inset-bottom));
  background-color: #fff;
  // border-top: ;
  .tabbar-item {
    flex: 1;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    
    image {
      width: 42rpx;
      height: 42rpx;
      display: block;
    }

    .title {
      font-size: 26rpx;
      color: #707070;
      margin-top: 4rpx;
    }
  }

  .active-tabbar-item {
    .title {
      color: $theme-color;
    }
  }
}
</style>
